<!-- 下拉菜单 -->
<template>
	<view>
		<view class="flex align-center" @click="onClick">
			<text class="font-1 font-gray mr-1">{{showTitle}}</text>
			<u-icon color="#bebebe" size="10" :name="show?'arrow-up-fill':'arrow-down-fill'"></u-icon>
		</view>
		<u-picker keyName="label" :closeOnClickOverlay="true" :show="show" :columns="[columns]" @close="show=false" @cancel="show=false" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		name:"bg-select",
		props:['value', 'columns'],
		data() {
			return {
				title:'请选择',
				show:false,
				selectValue:this.value
			};
		},
		computed:{
			showTitle(){
				console.log('this.columns',this.columns);
				
				let find = this.columns.find(c=>c.value == this.selectValue)
				if (find){
					return find.label
				} else {
					return '请选择'
				}
			}
		},
		methods:{
			onClick(){
				if(this.columns&&this.columns.length>0){
					this.show = true
				} else{
					this.show = false
					this.$modal.msg("暂无选项")
				}
			},
			onConfirm({indexs, value, values}){
				this.show = false;
				this.selectValue = value[0].value
				this.$emit("update:value", value[0].value)
				this.$emit("select-change", {indexs, value, values})
			},
			clear(){
				this.showValue = ''
				this.$emit("update:value", '')
			},
		},
		watch:{
			value(newVal, oldVal){
				this.selectValue = newVal
			}
		}
	}
</script>

<style>

</style>